<template>
  <div id="app">
    <div class="dev-header">
        <div class="select-list-box" @click="onToSelect">
            <span>{{$route.path}}</span>
            <ul v-show="showList" class="select-list">
              <li><router-link to="/button">button</router-link></li>
              <li><router-link to="/select">select</router-link></li>
            </ul>
        </div>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
  export default {
    data: function(){
      return {
        showList: false
      };
    },
    watch:{
      $route(){
        console.log('$route', this.$route);
      }
    },
    methods:{
      onToSelect(){
        this.showList = !this.showList;
      }
    },
    components:{
    }
  };

</script>
<style>
body{
  font-family: '微软雅黑';
}
.dev-header{
  height: 60px;
  background-color: #000;
  color: #fff;
}
.dev-header a{
  color: #fff;
}
.select-list-box{
  position: relative;
  width: 120px;
  line-height: 24px;
  border: 1px solid green;
}
.select-list{
  position: absolute;
  width: 120px;
  top: 23px;
  left: -1px;
  padding: 0;
  margin: 0;
  list-style: none;
  line-height: 24px;
  background-color: #000;
  border: 1px solid green;
}
.select-list a{
  display: block;
  text-indent: 10px;
}
</style>
